<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>军事简报</title>
    <style type="text/css">
        body,html{
            width:100%;
            height:100%;
            margin:0;
            font-family:"Microsoft YaHei";
        }
        #mapDiv{
            width:100%;
            height:100%;
        }
        #controlContainer {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
        }
        #searchInput {
            padding: 5px;
            width: 200px;
        }
        #searchButton {
            padding: 5px 10px;
            margin-left: 5px;
        }
        .control-group {
            margin-bottom: 10px;
        }
        .control-group label {
            display: inline-block;
            width: 60px;
        }
        .layer-control {
            margin-right: 15px;
        }
        p {
            position: absolute;
            top: 120px;
            left: 10px;
            z-index: 1000;
            background: white;
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            margin: 0;
        }
    </style>
    <script>
        var map;
        var zoom = 12;
        var geocoder;
        var currentMarker = null;
        var vectorLayer;    // 矢量图层
        var imageLayer;     // 影像图层
        var currentLayerType = 'vector'; // 当前图层类型

        // 动态获取密钥并初始化地图
        function initMap() {
            fetch('/map/key')
                .then(response => response.text())
                .then(tk => {
                    // 动态加载天地图API脚本
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + tk;
                    script.onload = function() {
                        // API脚本加载完成后初始化地图
                        initializeMap(tk);
                    };
                    document.head.appendChild(script);
                })
                .catch(error => {
                    console.error('获取密钥失败:', error);
                });
        }

        function initializeMap(tk) {
            // 创建矢量图层URL
            var vectorURL = "http://t0.tianditu.gov.cn/vec_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + tk;

            // 创建影像图层URL
            var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + tk;

            // 创建图层对象
            vectorLayer = new T.TileLayer(vectorURL, {minZoom: 1, maxZoom: 18});
            imageLayer = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});

            // 默认使用矢量图层
            var config = {layers: [vectorLayer]};

            // 初始化地图对象
            map = new T.Map("mapDiv", config);
            // 设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
            // 允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();
            // 创建地理编码器对象
            geocoder = new T.Geocoder();

            //创建右键菜单对象
            var menu = new T.ContextMenu({width: 140});
            //添加右键菜单
            var txtMenuItem = [
                {
                    text: '获得右键点击处坐标',
                    isDisable: false,
                    callback: function (lnglat) {
                        alert(lnglat.getLng() + "," + lnglat.getLat());
                    }
                }
            ];
            for (var i = 0; i < txtMenuItem.length; i++) {
                //添加菜单项
                var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
                menu.addItem(item);
                if (i == 1 || i == 3) {
                    //添加分割线
                    menu.addSeparator();
                }
            }
            map.addContextMenu(menu);
        }
        // 切换地图图层
        function switchLayer(layerType) {
            if (!map) return;

            if (layerType === 'vector') {
                // 切换到矢量图
                map.removeLayer(imageLayer);
                map.addLayer(vectorLayer);
            } else if (layerType === 'image') {
                // 切换到影像图
                map.removeLayer(vectorLayer);
                map.addLayer(imageLayer);
            }
        }

        // 搜索结果回调函数
        function searchResult(result) {
            if (result.getStatus() == 0) {
                // 清除之前的标记
                if (currentMarker) {
                    map.removeOverLay(currentMarker);
                }

                // 移动地图到搜索结果位置
                map.panTo(result.getLocationPoint(), 16);

                // 创建标注对象
                currentMarker = new T.Marker(result.getLocationPoint());
                // 向地图上添加标注
                map.addOverLay(currentMarker);
            } else {
                alert(result.getMsg() || '未找到相关地点');
            }
        }

        // 执行搜索
        function search() {
            var keyword = document.getElementById("searchInput").value;
            if (!keyword) {
                alert('请输入要搜索的地名');
                return;
            }

            // 清除之前的所有覆盖物
            map.clearOverLays();
            currentMarker = null;

            // 使用地理编码器进行搜索
            geocoder.getPoint(keyword, searchResult);
        }
        // 回车搜索
        function handleKeyPress(event) {
            if (event.keyCode === 13) {
                search();
            }
        }
        // 页面加载完成后初始化地图
        window.onload = function() {
            initMap();
        };
    </script>
</head>
<body>
    <div id="mapDiv"></div>
    <div id="controlContainer">
        <div class="control-group">
            <input type="text" id="searchInput" placeholder="请输入地名进行搜索" onkeypress="handleKeyPress(event)" value="北京市海淀区莲花池西路28号" />
            <button id="searchButton" onclick="search()">搜索</button>
        </div>
        <div class="control-group">
            <label>图层:</label>
            <input type="radio" id="vectorLayer" name="layer" class="layer-control" checked onclick="switchLayer('vector')">
            <label for="vectorLayer">矢量图</label>
            <input type="radio" id="imageLayer" name="layer" class="layer-control" onclick="switchLayer('image')">
            <label for="imageLayer">影像图</label>
        </div>
    </div>
</body>
</html>
